<template>
  <div class="global-down">
    <div class="global-down-drop-down">
      <a-dropdown
          :arrow="true"
          placement='bottomCenter'
          :trigger="['click']"
          :getPopupContainer="getPopupContainer">
        <template slot="overlay">
          <a-menu>
            <a-menu-item @click="financialVisible = true">
              <span>
                绑定金财账号
              </span>
            </a-menu-item>

            <a-menu-item v-if="roleListOptions.length > 1 || guidList.length > 1">
              <a-menu-item
                  @click="enterpriseVisible = true"
              >
              <span>
                 切换单位角色
              </span>
              </a-menu-item>

            </a-menu-item>
            <a-menu-item @click="changePassword(true)">
                    <span>
                        修改密码
                    </span>
            </a-menu-item>
            <a-menu-item @click="windowClear">
              <span>
                        退出登录
                    </span>
            </a-menu-item>
          </a-menu>
        </template>
        <span>
            <img v-if="imgHttpUrl" :src="imgHttpUrl" alt="用户头像">
            <span v-else class="img-user-default">
              {{ userName[0] }}
            </span>
          <span>
            {{ roleName }}
          </span>
          <span>
            {{ userName }}
          </span>
          <a-icon type="down"/>
        </span>
      </a-dropdown>
      <div v-if="Novice" @click="noviceReload" class="novice">
        <img :src="require('@/assets/images/home/guide.png')" alt="">
        <span style="color: #ffffff">新手指导</span>
      </div>
    </div>
    <finance-account
        :financial-visible.sync="financialVisible"
    />
    <enterprise-modal
        :enterpriseVisible.sync="enterpriseVisible"
        :roleListOptions="roleListOptions"
        :guidList="guidList"
        :ok="ok"
    />
    <password-dialog-cpn
      v-if="passwordDialog"
      :passwordDialog="passwordDialog"
      @defaultPasswordDialog="changePassword(false)"/>
  </div>
</template>

<script>
import {getHeadImgByAuth} from "@/api/linYi";
import {getMenuList} from "@/api/menu/menu";
import {clearLocalStorage, getLocalStorage, setLocalStorage, removeLocalStorageTrue} from "@/utils/localstore";
import {EnterpriseModal} from '@/components';
import FinanceAccount from '@/components/financeAccount/FinanceAccount';
import passwordDialogCpn from '@/components/changePassword';
import {getParams, getFirstMenuRouter} from "@/utils";
// import store from "@/store";
// import router from "@/router";

const {Novice} = getParams();

export default {
  name: "GlobalDown",
  components: {
    FinanceAccount,
    EnterpriseModal,
    passwordDialogCpn
  },
  data() {
    return {
      Novice,
      financialVisible: false,
      enterpriseVisible: false,
      imgHttpUrl: '',
      roleListOptions: JSON.parse(getLocalStorage('roleListOptions')),
      guidList: JSON.parse(getLocalStorage('guidList')),
      userName: getLocalStorage('userName'),
      roleName: getLocalStorage('roleName'),
      passwordDialog: false
    }
  },
  created() {
    getHeadImgByAuth({//傅接口部署上去即可
      appId: getLocalStorage('appId'),
      userId: getLocalStorage('dingTalkId')
    }).then(res => {
      if (res.success) {
        this.imgHttpUrl = res.data
      }
    })
  },
  methods: {
    changePassword(value) {
      this.passwordDialog = value
    },
    noviceReload() {
      removeLocalStorageTrue('noviceGuide');
      window.location.reload();
    },
    getPopupContainer() {
      return document.querySelector('.global-down')
    },
    async windowClear() {
      await clearLocalStorage();
      window.location.reload();
    },
    async ok({roleListSelectChildren}) {
      // if (roleListSelectChildren.appId === 6) {
      //   setLocalStorage('roleId', roleListSelectChildren.id);
      //   setLocalStorage('roleName', roleListSelectChildren.name);
      //   getFirstMenuRouter({
      //     url: window.location.hostname,
      //     userId: getLocalStorage('userId'),
      //     enabled: 1,
      //     roleId: getLocalStorage('roleId'),
      //     state: 4
      //   })
      // } else {
        // setLocalStorage('roleId', roleListSelectChildren.id);
        // setLocalStorage('roleName', roleListSelectChildren.name);
        // this.enterpriseVisible = false;
        // window.location.reload();
        // this.roleSelectModalVisible = false;
        //切换单位框是根据roleSelectModalVisible显示隐藏
        this.enterpriseVisible = false;
        const appIdBool = (String(roleListSelectChildren.appId) === getLocalStorage('appId'))
        setLocalStorage('roleId', roleListSelectChildren.id);
        setLocalStorage('roleName', roleListSelectChildren.name);
        setLocalStorage('appId', roleListSelectChildren.appId);
        if (!appIdBool && roleListSelectChildren.appId === 6) {
          getFirstMenuRouter({
            // url: window.location.hostname,
            // userId: getLocalStorage('userId'),
            // enabled: 1,
            roleId: roleListSelectChildren.id,
            state: 4
          })
        } else if (!appIdBool && roleListSelectChildren.appId === 5){
          getMenuList({
            roleId: roleListSelectChildren.id,
            state: 4
          }).then(res =>{
            const {data, success} = res
            if (success) {
              this.$router.push(data[0])
              window.location.reload()
            }
          })
        } else {
          window.location.reload()
        }
      }
    // }
  }
}
</script>

<style scoped lang="less">
.global-down {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  //移动账号到右边
  justify-content: flex-end;
  height: 100%;
  .global-down-drop-down{
    height: 100%;
    display: flex;
    align-items: center;
  }
  .novice {
    cursor: pointer;
    margin-left: 8px;
    > img {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      border-style: none;
    }
  }

  > div {
    display: flex;

    img {
      margin-right: 9px;
      width: 30px;
      height: 30px;
      border-radius: 25px;
    }
  }

  .img-user-default {
    background-color: #1279da;
    font-size: 20px;
    text-align: center;
    line-height: 28px;
    border: oldlace 1px solid;
    display: inline-block;
    margin-right: 9px;
    width: 30px;
    height: 30px;
    border-radius: 25px;
  }
}
</style>
